<template>
    <div class="w-full h-full flex flex-col">
        <div class="w-full  flex flex-col">
            <el-page-header @back="$router.back()" :content="s_article.m_article.id ? '编辑文章' : '添加文章'">
            </el-page-header>
            <el-divider class=" mb-w10"></el-divider>
        </div>
        <div class="w-full h-w800 flex flex-col overflow-y-auto ">
            <div class="flex flex-row items-center w-w1/2 h-w50 leading-w50 text-c3 text-f16  mt-w30">
                <div class=" w-w1/4 text-right pr-w20">文章类别</div>
                <el-select class="w-w2/4" v-model="s_article.m_article.typeId" placeholder="请选择">
                    <el-option v-for="item in s_article.list_type" :key="item.id" :label="item.name"
                        :value="item.id + ''">
                    </el-option>
                </el-select>
            </div>
            <div class="flex flex-row items-center w-w1/2 h-w50 leading-w50 text-c3 text-f16  mt-w30">
                <div class=" w-w1/4 text-right pr-w20">文章标题</div>
                <el-input class="w-w2/4" placeholder="请输入内容" v-model="s_article.m_article.title" clearable autofocus>
                </el-input>
            </div>
            <div class="flex flex-row items-center w-w1/2 h-w50 leading-w50 text-c3 text-f16  mt-w30">
                <div class=" w-w1/4 text-right pr-w20">文章描述</div>
                <el-input class="w-w2/4" placeholder="请输入内容" v-model="s_article.m_article.des" clearable autofocus>
                </el-input>
            </div>
            <div class="flex flex-row items-start  w-w1/2   text-c3 text-f16  mt-w30">
                <div class=" w-w1/4 text-right pr-w20 ">列表封面</div>
                <div class="flex flex-col">
                    <el-upload action="" :show-file-list="false" :on-change="action_select_list_cover"
                        :auto-upload="false" accept="image/png, image/jpeg">
                        <img v-if="s_article.m_article.listCoverUrl" :src="s_article.m_article.listCoverUrl"
                            style="width: 100px;height: 100px;  display: block;">
                        <i v-else class="el-icon-plus avatar-uploader-icon"
                            style="width:100px;height:100px;line-height:100px;"></i>
                    </el-upload>
                    <div class=" mt-w5 text-f15 text-c6">图片尺寸：196px*192px</div>
                </div>
            </div>
            <div class="flex flex-row items-start  w-w1/2   text-c3 text-f16  mt-w30">
                <div class=" w-w1/4 text-right pr-w20 ">内容封面</div>
                <div class="flex flex-col">
                    <el-upload action="" :show-file-list="false" :on-change="action_select_banner_cover"
                        :auto-upload="false" accept="image/png, image/jpeg">
                        <img v-if="s_article.m_article.bannerCoverUrl" :src="s_article.m_article.bannerCoverUrl"
                            style="width: 244px;height: 100px;  display: block;">
                        <i v-else class="el-icon-plus avatar-uploader-icon"
                            style="width:244px;height:100px;line-height:100px;"></i>
                    </el-upload>
                    <div class=" mt-w5 text-f15 text-c6">图片尺寸：828px*340px</div>
                </div>
            </div>
            <div class="flex flex-row items-start w-full   text-c3 text-f16  mt-w30">
                <div class="text-right pr-w20" style="width:12.5%">文章内容</div>
                <UITinymceEditor :data="s_article.m_article.content" @editor_change="action_editor_change"
                    class="w-w3/4 h-w500">
                </UITinymceEditor>

            </div>

            <div class="flex flex-row items-start w-wfull   text-c3 text-f16  mt-w30">
                <div class="text-right pr-w20" style="width:12.5%">视频号</div>
                <div style="width:88.5%">
                    <i class="el-icon-plus avatar-uploader-icon cursor-pointer w-full h-w108 leading-w108"
                        @click="dialog_add_works = true"></i>
                    <div class="flex flex-row min-h-w108  w-full mt-w20 items-center border p-w10"
                        v-for="(item, index) in s_article.list_works " :key="index">
                        <img class=" w-w180 h-w108" :src="item.bannerUrl">
                        <div class="flex flex-col ml-w10 h-full w-w300" style="width:45%">
                            <div class="h-w1/3 text-c3 text-f16 font-bold flex items-center">{{ item.sName }}</div>
                            <div class="h-w1/3 text-c6 text-f14 flex items-center">{{ '作者：' + item.sAuthor }}</div>
                            <div class="h-w1/3 text-c6 text-f14 flex items-center">{{ '公司：' + item.sCompanyName }}</div>
                        </div>
                        <i class="el-icon-delete ml-w20 text-f30 cursor-pointer" @click="action_del_works(index)"></i>
                    </div>
                </div>
            </div>


            <div class="flex flex-row items-start w-w1/2   text-c3 text-f16  mt-w30">
                <div class=" w-w1/4 text-right pr-w20"></div>
                <el-button class="w-w2/4 bg-cmain" type="primary" @click="action_add_article">确定</el-button>
            </div>
        </div>
        <UiDialogAddWorks :is_showDialog="dialog_add_works" :data="s_article.m_works"
            @nydialog_closed="dialog_add_works = false" @nydialog_submit="action_add_works"></UiDialogAddWorks>
    </div>
</template>

<script src="./Index.ts"></script>
<style src="./Index.less" lang="less" scoped>

</style>
